<template>
	<view class="mydongtaiPage" v-cloak>
		<view class="topHeader">
			<view class="flexItemMain">
				<image class="flexItemLeftImgback" @click="goback" src="../../static/my/fanhui.png" mode=""></image>
				<image class="flexItemRightImgmore" @click="clickMore(userData.id)" src="../../static/my/more.png" mode=""></image>
			</view>
		</view>
		<view class="bgImgBox">
			<image class="bgImg" :src="userData.userImg" mode="aspectFit"></image>
		</view>
		<view class="dianBox">
			<view class="dian"></view>
		</view>
		<view class="mainBox">
			<view class="flexItemCentertop">
				<view class="flexItemCenterTop">{{userData.userNickname}}</view>
				<view class="flexItemCenterBottom" v-if="userData.sex==2">
					<image class="sexImg" src="../../static/dongtai/sex.png"></image>
					{{userData.age}}
				</view>
				<view class="flexItemCenterBottom2" v-if="userData.sex==1">
					<image class="sexImg" src="../../static/pages/sex.png"></image>
					{{userData.age}}
				</view>
				<!-- <view class="flexItemCenterBottom dizhi">
						珠海
					</view> -->
			</view>
			<view class="tabbarBox">
				<view :class="[curIndex==0?'curTab':'','tabbarItem']" @click="changeTab(0)">关于TA
					<view class="curBottom" v-if="curIndex==0">
						<view class="tabbottom">
						</view>
					</view>
				</view>
				<view :class="[curIndex==1?'curTab':'','tabbarItem']" @click="changeTab(1)">TA的活动
					<view class="curBottom" v-if="curIndex==1">
						<view class="tabbottom">
						</view>
					</view>
				</view>
				<view :class="[curIndex==2?'curTab':'','tabbarItem']" @click="changeTab(2)">动态
					<view class="curBottom" v-if="curIndex==2">
						<view class="tabbottom">
						</view>
					</view>
				</view>
			</view>
			<view class="guanyuta" v-if="curIndex==0">
				<view class="guanyutaBox">
					<view class="guanyutitle">
						个人信息
					</view>
					<view class="fensiBox">
						<view class="fensiNum">
							{{userInfo.fans}}
						</view>
						<view class="fensiText">
							粉丝
						</view>
						<view class="guanzhuText">
							{{userInfo.follow}}关注
						</view>
					</view>
					<view class="idBox">
						<view class="idtop">
							ID
						</view>
						<view class="idNum">
							{{userData.id}}
						</view>
					</view>
					<view class="idBox1">
						<view class="idtop">
							个人签名
						</view>
						<view class="idcontent" v-if="userInfo.personal_signature">
							{{userInfo.personal_signature}}
						</view>
						<view class="idcontent" v-else>
							这个人很懒，什么也没说...
						</view>
					</view>
					<view class="guanyutitle">
						认证信息
					</view>
					<view class="renzhengImgBox">
						<view class="renzhengImgItemBox">
							<image class="renzhengImgItem" v-if="userInfo.authentication.mobile==0" src="../../static/my/dh.png" mode=""></image>
							<image class="renzhengImgItem" v-else src="../../static/my/dh2.png" mode=""></image>
							<view class="renzhengItemTitle">电话认证</view>
						</view>
						<view class="renzhengImgItemBox">
							<image class="renzhengImgItem" v-if="userInfo.authentication.idcard==0" src="../../static/my/sm.png" mode=""></image>
							<image class="renzhengImgItem" v-else src="../../static/my/sm2.png" mode=""></image>
							<view class="renzhengItemTitle">实名认证</view>
						</view>
						<view class="renzhengImgItemBox">
							<image class="renzhengImgItem" v-if="userInfo.authentication.weixin==0" src="../../static/my/wx.png" mode=""></image>
							<image class="renzhengImgItem" v-else src="../../static/my/wx2.png" mode=""></image>
							<view class="renzhengItemTitle">微信认证</view>
						</view>
						<view class="renzhengImgItemBox">
							<image class="renzhengImgItem" v-if="userInfo.authentication.qq==0" src="../../static/my/qq.png" mode=""></image>
							<image class="renzhengImgItem" v-else src="../../static/my/qq2.png" mode=""></image>
							<view class="renzhengItemTitle">QQ认证</view>
						</view>
					</view>
					<view class="guanyutitle">
						访客
						<view class="fangkeNum">
							{{userInfo.visitor_count}}人
						</view>
					</view>
					<view class="fangkeImgBox" v-if="userInfo.visitor_count>0">
						<image class="fangkeImgItem" v-for="(ite,i) in userInfo.visitor" :key="i" :src="ite.avatar[0]" mode=""></image>
					</view>
				</view>

			</view>
			<view class="huodong" v-if="curIndex==1">
				<view class="huodongBox" v-for="item in activeList" :key="item.id">
					<view class="flexItemMain ">
						<image class="flexItemLeftImg" :src="item.avatar[0]" mode="aspectFill"></image>
						<view class="flexItemCenter2">
							{{item.nickname}}
						</view>
						<image src="../../static/my/yao.png" v-if="id!=selfId" class="flexItemRightImg" mode="aspectFill"></image>
					</view>
					<view class="flexItemContent">
						{{item.content}}
					</view>
					<view class="flexItemImgBox" v-if="item.image.length>0">
						<image v-for="(ite,index) in item.image" :src="ite" :key="index" class="huodongItemImg" mode="aspectFill"></image>
					</view>
					<view class="more" style="float: right;position: absolute;right: 0px;bottom: 30rpx;" @click="openOPtions(item.id)" >...</view>
				</view>
				<view class="nomore">
					<view class="nomoreleft"></view>
					<view class="nomoreMiddle">没有更多了</view>
					<view class="nomoreright"></view>
				</view>
			</view>
			<view class="huodong" v-if="curIndex==2">
				<view class="dongtaiBox" v-for="(item,index) in dynamicList" :key="index">
					<view class="huodongContent">
						{{item.content}}
					</view>
					<!-- <view class="quanwen">全文</view> -->
					<view class="huodongImgBox" v-if="item.image.length>0">
						<image class="huodongImgItem" v-for="(ite,ind) in item.image" :key="ind" :src="ite" mode="aspectFill"></image>
					</view>
					<view class="huodongtime">
						{{item.created_at}}
					</view>
					<view class="dynamiItemImgBottom">
						<image class="dianzanImg" @click="zan(item,index,1)" v-if="item.is_user_give==1" src="../../static/dongtai/xin2.png"></image>
						<image class="dianzanImg" @click="zan(item,index,0)" v-else src="../../static/dongtai/xin.png"></image>
						<view class="dianzan" v-if="item.is_user_give==0">点赞</view>
						<view class="dianzan" v-else>{{item.give_sum}}</view>
						<image class="xinxiImg" @click="toDetail(item)" src="../../static/dongtai/xinxi.png"></image>
						<view class="xinxi">{{item.comment_sum}}</view>
						<image class="more" src="../../static/dongtai/more.png" @click="openOPtions(item.id)" ></image>
					</view>
					<view class="zhanwei"></view>

				</view>
				<view class="nomore">
					<view class="nomoreleft"></view>
					<view class="nomoreMiddle">没有更多了</view>
					<view class="nomoreright"></view>
				</view>
			</view>
		</view>
		<view class="bottomBtnguanzhu">
			<image class="guanzhuBottomBtn" src="../../static/my/guanzhu.png" mode=""></image>
			<image class="guanzhuBottomBtn" @click="chat" src="../../static/my/chat.png" mode=""></image>
		</view>
		<view class="hide-box">
			<z-share
				ref="zShare"
				:cover="canvasBg"
				:val="canvasVal"
				:avatar="userInfo.user.avatar[0]"
				:age="userInfo.user.age"
				:nickname="userInfo.user.nickname"
				:address="userCity"
			></z-share>
		</view>
	</view>
</template>

<script>
	import zShare from '@/components/z-share/z-share.vue'
	export default {
		components:{
			zShare
		},
		data() {
			return {
				canvasBg:'/static/newimg/img_01.png',
				canvasVal:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3950174433,268576240&fm=11&gp=0.jpg',
				curIndex: 0,
				id: '',
				selfId: '',
				userInfo: {
					visitor: [{
						avatar: []
					}]
				},
				dynamicList: [],
				activeList: [],
				userData:{
					userImg:'',
					userNickname:'',
					userSex:'',
					userAge:'',
					id:''
				}
			}
		},
		onLoad(option) {
			setTimeout(() => {
				this.id = option.id
				this.selfId = uni.getStorageSync('userId')
				if(option.city){
					this.userCity = option.city;
				}else{
					this.userCity = '未知';
				}
				this.getData(option.id)
				this.gethuodongData(option.id)
				this.getdynamicData(option.id)
				if (this.id != this.selfId) {
					//足迹
					this.addzuji(this.id)
				}
			}, 50);
		},
		methods: {
			clickMore(userInfo) {
				let that = this
				uni.showActionSheet({
					itemList: ['拉黑', '举报', '分享'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.lahei(userInfo)
						} else if (res.tapIndex == 1) {
							that.jubao(userInfo)
						} else if (res.tapIndex == 2) {
							that.$refs.zShare.saveToAlbum();
						}
					},
					fail: function(res) {
						// console.log(res.errMsg);
					}
				});
			},
			chat() {
				this.$checkIsVip().then(res => {
					if (res) {
						this.toChat()
					} else {
						uni.showModal({
							content: "开通会员即可私聊",
							cancelText: "取消",
							confirmText: "去开通",
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: "vipCenter/vipCenter"
									})
								}
							}
						})
					}
				})
			},
			toChat() {
				this.$store.commit('createConversationActive', {
					type: "C2C",
					data: this.userInfo.user.id
				})
				this.userInfo.user.userID = this.userInfo.user.id;
				uni.setStorageSync('chooseUser', this.userInfo.user);
				uni.navigateTo({
					url: '/pages/tim/room'
				})
			},
			jubao(userInfo) {
				uni.navigateTo({
					url: '/pages/my/report?id=' + this.userInfo.user.id + '&nickname=' + this.userInfo.user.nickname + '&avatar=' +
						JSON.stringify(this.userInfo.user.avatar),
					success(res) {

						// console.log("举报")
					}
				})

			},
			lahei(userInfo) {
				// // console.log(userInfo.user.id)
				let that = this
				let paramData = {
					id: this.userInfo.user.id
				}
				this.$utils.postrequest("/api/block/add", paramData, function(res) {
					if (res.code == 200) {
						// console.log('拉黑成功')
						that.$utils.showLayer('拉黑成功')
					}
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/dynami/detail?id=' + item.id
				})
			},
			openOPtions(id){
				uni.showActionSheet({
					itemList:['删除'],
					success:res=>{
						if(this.curIndex == 2){
							this.deleteDymic(id)
						}
						else if(this.curIndex == 1){
							this.deleteActive(id)
						}
					}
				})
			},
			deleteDymic(id){
				let that = this
				let data = {
					id:id
				}
					that.$utils.postrequest('/api/dynamic/delete',data,res=>{
						if(res.code == 200){
							uni.showToast({
								title:'删除成功',
								icon:"none"
							})
							that.getdynamicData(that.id)
						}else{
							uni.showToast({
								title:res.message
							})
						}
					})
			},
			deleteActive(id){
				let that = this
				let data = {
					id:id
				}
					that.$utils.postrequest('/api/activit/delete',data,res=>{
						if(res.code == 200){
							uni.showToast({
								title:'删除成功',
								icon:"none"
							})
							that.gethuodongData(that.id)
						}else{
							uni.showToast({
								title:res.message
							})
						}
					})
			},
			guanzhu(e, index, type) {
				//0未关注  1已关注
				let that = this
				let paramData = {
					id: e.user_id
				}
				this.$utils.postrequest("/api/user_follow", paramData, function(res) {
					if (res.code == 200) {
						if (type == 1) {
							that.list[index].follow = 0
						} else {
							that.list[index].follow = 1
						}
					}
				})
			},
			zan(e, index, type) {
				let that = this
				let paramData = {
					id: e.id
				}
				this.$utils.postrequest("/api/dynamic/give", paramData, function(res) {
					if (res.code == 200) {
						if (type == 1) {
							that.dynamicList[index].give_sum = that.dynamicList[index].give_sum - 1
							that.dynamicList[index].is_user_give = 0
						} else {
							that.dynamicList[index].give_sum = that.dynamicList[index].give_sum + 1
							that.dynamicList[index].is_user_give = 1
						}
					}
				})
			},
			changeTab(num) {
				this.curIndex = num
				if (num == 0) {
					this.getData(this.id)
				} else if (num == 1) {
					this.gethuodongData(this.id)
				} else {
					this.getdynamicData(this.id)
				}
			},
			addzuji(id = 2) {
				let that = this
				this.$utils.postrequest("/api/user_footprint", {
					id: id
				}, function(res) {
					if (res.code == 200) {

					}
				})
			},
			getData(id = 2) {
				let that = this
				this.$utils.request("/api/user/details?id=" + id, {}, function(res) {
					if (res.code == 200) {
						res.data.user.avatar = JSON.parse(res.data.user.avatar)
						if (res.data.visitor.length > 0) {
							res.data.visitor.forEach((item) => {
								item.avatar = JSON.parse(item.avatar)
							})
						}
						that.userInfo = res.data
						that.userData = res.data.user
						that.userData = {
							userInfo:res.data,
							userImg:res.data.user.avatar[0],
							userNickname:res.data.user.nickname,
							userSex:res.data.user.sex,
							userAge:res.data.user.age,
							id:res.data.user.id
						}
						// console.log('userInfo', that.userInfo)
					}
				})
			},
			gethuodongData(id = 2) {
				let that = this
				this.$utils.postrequest("/api/user/activity", {
					page: 1,
					id: id
				}, function(res) {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach((item, index) => {
								item.avatar = JSON.parse(item.avatar)
								item.image = JSON.parse(item.image)
							})
						}
						that.activeList = res.data
					}
				})
			},
			getdynamicData(id = 2) {
				let that = this
				this.$utils.postrequest("/api/user/dynamic", {
					page: 1,
					id: id
				}, function(res) {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach((item) => {
								item.avatar = JSON.parse(item.avatar)
								item.image = JSON.parse(item.image)
							})
						}
						that.dynamicList = res.data
					}
				})
			},
			goback() {
				uni.navigateBack()
			},
			//预览
			preview(urls) {
				// console.log(urls)
				uni.previewImage({
					urls: urls,
					current: 0,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							// console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	/*      */
	.guanyutitle {
		font-size: 26rpx;
		font-family: PingFang SC;
		
		color: #262430;
	}

	.fensiBox {
		display: flex;
		align-items: flex-end;
		margin-bottom: 39rpx;
		margin-top: 46rpx;
	}

	.fensiNum {
		flex: none;
		font-size: 42rpx;
		font-family: PingFang SC;
		
		color: #262430;
		margin-right: 19rpx;
	}

	.fensiText {
		flex: none;
		font-size: 18rpx;
		font-family: PingFang SC;
		
		color: #8A8896;
		margin-right: 98rpx;
	}

	.guanzhuText {
		flex: none;
		font-size: 18rpx;
		font-family: PingFang SC;
		
		color: #8A8896;
	}

	.idBox {
		width: 219rpx;
		background: #F8F8FA;
		border-radius: 10rpx;
		margin-left: 8rpx;
		margin-bottom: 21rpx;
		padding-right: 68rpx;
		padding-bottom: 27rpx;
	}

	.idBox1 {
		background: #F8F8FA;
		border-radius: 10rpx;
		margin-left: 8rpx;
		margin-bottom: 65rpx;
		padding-right: 68rpx;
		padding-bottom: 27rpx;
	}

	.idtop {
		font-size: 24rpx;
		font-family: PingFang SC;
		
		color: #8A8896;
		margin-left: 32rpx;
		margin-bottom: 26rpx;
		padding-top: 32rpx;
	}

	.idcontent {
		font-size: 24rpx;
		font-family: PingFang SC;
		
		color: #32303B;
		margin-left: 32rpx;
	}

	.idNum {
		margin-left: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		
		color: #302E3A;
	}

	.huodongContent {
		font-size: 30rpx;
		
		color: #4D4C56;
	}

	.renzhengImgBox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 34rpx;
		margin-bottom: 64rpx;
	}

	.renzhengImgItemBox {
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}

	.renzhengImgItem {
		border-radius: 100%;
		margin-bottom: 24rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.renzhengItemTitle {
		font-size: 22rpx;
		font-family: PingFang SC;
		
		color: #413C76;
		text-align: center;
	}

	.guanyutitle {
		position: relative;
		margin-bottom: 37rpx;
	}

	.fangkeNum {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 24rpx;
		font-family: PingFang SC;
		
		color: #45417B;
	}

	.fangkeImgBox {
		display: flex;
		align-items: center;
	}

	.fangkeImgItem {
		width: 52rpx;
		height: 52rpx;
		margin-right: 20rpx;
		border-radius: 100%;
	}

	.quanwen {
		font-size: 30rpx;
		font-family: PingFang SC;
		
		color: #7B5BFC;
		margin-top: 21rpx;
		margin-bottom: 20rpx;
	}

	.huodongImgBox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.huodongImgItem {
		border-radius: 5rpx;
		width: 228rpx;
		margin-right: 5rpx;
		height: 228rpx;
	}

	.huodongtime {
		font-size: 24rpx;
		font-family: PingFang SC;
		
		color: #B0B3B8;
		margin: 29rpx 0;
	}

	.zhanwei {
		width: 100%;
		height: 16rpx;
		background: #F6F7F9;
		margin-top: 30rpx;
		margin-bottom: 45rpx;

	}

	.dynamiItemImgBottom {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.more {
		flex: none;
		width: 39rpx;
		height: 25rpx;
		margin-right: 37rpx;
	}

	.dianzan {
		flex: none;
		font-size: 26rpx;
		
		color: #AAB0B6;
		margin-right: 53rpx;
	}

	.xinxiImg {
		flex: none;
		width: 43rpx;
		height: 43rpx;
		margin-right: 11rpx;
	}

	.xinxi {
		flex: auto;
		font-size: 26rpx;
		
		color: #AAB0B6;
	}

	.dianzanImg {
		width: 44rpx;
		height: 44rpx;
		/* margin-left: 30rpx; */
		margin-right: 10rpx;
	}

	.bottomBtnguanzhu {
		position: fixed;
		background-color: #fff;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		justify-content: space-around;
	}

	.guanzhuBottomBtn {
		width: 331rpx;
		height: 92rpx;
		margin-bottom: 43rpx;
		margin-top: 13rpx;

	}

	.nomore {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 170rpx;
	}

	.nomoreMiddle {
		font-size: 22rpx;
		font-family: PingFang SC;
		
		color: #C7C8DB;

	}

	.nomoreleft {
		width: 37rpx;
		height: 1rpx;
		background: #DCDDF3;
		margin-right: 18rpx;
	}

	.nomoreright {
		width: 37rpx;
		height: 1rpx;
		background: #DCDDF3;
		margin-left: 18rpx;
	}

	.mydongtaiPage {
		width: 100%;
		height: 100%;
		/* background: url('../../static/pages/title.jpg') no-repeat;
        background-size: 100% auto; */
		position: relative;

	}

	.bgImgBox {
		background-color: #eaeaea;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: -1;
	}

	.bgImg {
		width: 100%;
		height: 750rpx;
	}

	.topHeader {
		padding-top: 119rpx;
	}

	.flexItemMain {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexItemLeftImgback {
		width: 17rpx;
		height: 31rpx;
		margin-left: 31rpx;
	}

	.flexItemRightImg {
		width: 147rpx;
		height: 85rpx;
		margin-right: 32rpx;
	}

	.dianBox {
		display: flex;
		justify-content: center;
		margin-top: 450rpx;
	}

	.dian {
		background-color: #FFFFFF;
		width: 26rpx;
		height: 8rpx;
		border-radius: 4rpx;
	}

	.mainBox {

		border-radius: 30rpx 30rpx 10rpx 10rpx;
		margin-top: 30rpx;
		background-color: #fff;
	}

	.flexItemCentertop {
		flex: auto;
		text-align: left;
		font-size: 26rpx;
		
		color: #1C1A27;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-bottom: 32rpx;
		padding-top: 31rpx;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
		font-size: 26rpx;
		
		color: #1C1A27;
	}

	.flexItemCenter2 {
		flex: auto;
		text-align: left !important;
		font-size: 26rpx;
		
		color: #1C1A27;
	}

	.flexItemCenterTop {
		font-size: 36rpx;
		
		color: #13111E;
		margin-bottom: 20rpx;
	}

	.flexItemCenterBottom {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 14rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-86deg, #FF8AB4, #FD73A3);
		border-radius: 17rpx;
	}

	.flexItemCenterBottom2 {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 14rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		line-height: 33rpx;
		background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);
		border-radius: 17rpx;
	}

	.sexImg {
		width: 16rpx;
		height: 16rpx;
		margin-left: 12rpx;
		margin-right: 4rpx;
	}

	.dizhi {
		margin-left: 10rpx;
		text-align: center !important;
		padding-left: 15rpx;
	}

	.tabbarBox {
		display: flex;
		margin-bottom: 75rpx;
	}

	.tabbarItem {
		position: relative;
		font-size: 26rpx;
		font-family: PingFang SC;
		
		color: #9592A2;
		margin-left: 38rpx;
		margin-right: 13rpx;
	}

	.curTab {
		font-size: 32rpx;
		font-family: PingFang SC;
		
		color: #262430;
	}

	.curBottom {
		position: absolute;
		bottom: -29rpx;
		width: 100%;
		height: 10rpx;

	}

	.tabbottom {
		margin: 0 auto;
		width: 25rpx;
		height: 10rpx;
		background: #6A6699;
		border-radius: 5rpx;
	}

	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx 0;
	}

	.flexItemLeftImg {
		width: 68rpx;
		height: 68rpx;
		flex: none;
		margin-right: 15rpx;
		margin-left: 32rpx;
		border-radius: 100%;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
	}

	.flexItemRightImgmore {
		width: 31rpx;
		height: 8rpx;
		flex: none;
		margin-right: 30rpx;
		margin-left: 10rpx;
	}

	.flexItemContent {
		font-size: 26rpx;
		
		color: #726D94;
		margin-left: 32rpx;
	}

	.flexItemImgBox {
		margin-top: 29rpx;
		display: flex;
		/* justify-content: space-between; */
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.huodongBox {
		background: #F8F8FA;
		border-radius: 20rpx;
		margin-left: 26rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		position: relative;
	}

	.guanyutaBox {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		margin-bottom: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 150rpx;
	}

	.dongtaiBox {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		margin-bottom: 30rpx;
		padding-top: 30rpx;

	}

	.huodongItemImg {
		width: 30%;
		height: 145rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.hide-box{
		width: 0;
		height: 0;
		overflow: hidden;
	}
</style>
